<template>
      <div class="mod_list" >
            <div class="mod_list_list">
                <div class="mod_list_item" v-for="(path,index) in collection" :key="index">
                    <div class="mod_list_item_box">
                        <div class="list_cover">
                            <a>
                                <img class="mod_list_pic" :src="path">
                                <i class="mod_cover_icon_play" v-show="need"></i>
                                <i class="mod_cover_mask"></i>
                            </a>
                        </div>
                    </div>
                    <h4 class="mod_list_title">
                        <span class="mod_list_title_txt">
                            <slot name="list_title_txt"></slot>
                        </span>
                    </h4>
                    <!-- 默认不显示 -->
                    <div class="other" >
                       
                    </div>
                </div>
            </div>
        </div>
</template>
<script>
import {CreateImgList} from '@/utils/mixin.js'
    export default{
        name:'ItemCard',
        mixins:[CreateImgList],
        props:['PathFolder','Nums','need','LoadMore'],
        data(){
            return{
                rendernums:30, //这是一个会被load函数更改的值
                collection:[],

            }
        },
        beforeMount(){
            this.GetImgPath(this.PathFolder,'DianTai',this.Nums);
        },
        mounted(){//如果不是用于无线滚动组件
            if(typeof(this.LoadMore) === 'undefined')
            {
                this.collection = this.ImgList[0].DianTai;//则使用全部的图片
            }
        }
        ,
        watch:{//如果指定了loadmore则表示每次下滑到底部时需要加载更多的loadmore数量的图片
            LoadMore(){
              this.collection = this.ImgList[0].DianTai.slice(0, this.rendernums + this.LoadMore)//为无线下滑的组件服务，只要指定loadmore的值即可
            }
        }
    }
</script>
<style scoped lang="less">
  @import '@/Style/css/ItemCard.css';
    
    .mod_list{
        max-width: 1200px;
        margin: 0 auto;
    }
    .mod_list_list{
        margin-right:-20px ;
        clear: both;
    }
    .mod_list_item{
        float:right;
        width:20%;
        padding-bottom: 44px;
        overflow:hidden;
        list-style: none;
    }
    .mod_list_item_box{
        position: relative;
        margin-right: 20px;
        list-style: none;
    }
   
    .list_cover{
        position: relative;
        display: block;
        overflow: hidden;
        padding-top: 100%;
        margin-bottom: 15px;
    }
    
    .list_cover a {
        text-decoration: none;
        color:#000;
        cursor: pointer;
        list-style: none;
    }
    .mod_cover_mask{
        position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: #000;
            opacity: 0;
    }
    .list_cover:hover {
        .mod_list_pic{
        transform: scale(1.07) translateZ(0);
        transition: transform .75s cubic-bezier(0,1,.75,1);
       
        }
        .mod_cover_mask{
            opacity: .2;
            filter: alpha(opacity=20);
            transition: opacity .5s;
        }
    }
    
    .mod_list_pic{
        position: absolute;
        top: 0;
        left: 0;
        width:100%;
       
        border: 0;
        -ms-interpolation-mode: bicubic;
        image-rendering: optimizeQuality;
        color: #000;
        cursor: pointer;
    }
    
    

</style>